import React, { useState, FC } from 'react';
import { Button } from 'antd';

interface TitleProps {
  title?: string;
}

// 只对title改变响应
const Title: FC<TitleProps> = React.memo(props => {
  console.log('我是title组件');
  return <div>标题： {props.title}</div>;
});

// 显式的声明displayName
Title.displayName = 'Title';

interface CountProps {
  count?: number;
}

// 只对count改变响应
const Count: FC<CountProps> = React.memo(props => {
  console.log('我是Count组件');
  return <div>条数：{props.count}</div>;
});

Count.displayName = 'Count';

function Demo5() {
  const [count, setCount] = useState(0);
  const [title, setTitle] = useState('hello');

  return (
    <div>
      <Title title={title}></Title>
      <Count count={count}></Count>
      <Button
        type="primary"
        onClick={() => {
          setCount(1);
        }}
      >
        change count
      </Button>{' '}
      <Button
        type="primary"
        onClick={() => {
          setTitle('hello React Memo');
        }}
      >
        change title
      </Button>
    </div>
  );
}

export default Demo5;
